<template>
	<view class="my">
		<view class="my-top">
			<view class="my-top-ul">
				<view class="index-use" >
					<view class="my-img">
						<view class="">
							<image src="../../static/images/touxiang.png" mode=""></image>
						</view>
					</view>
					<view class="my-use" v-for="(item,index) in index">
						<view class="my-use-li">
							<view class="my-use-name">
								用户名称
							</view>
							<view class="my-use-id">
								ID:{{item.inden}}
							</view>
						</view>
						<view class="my-use-lo">
							<image src="/static/images/my-phone.png" mode=""></image>
							<text>{{item.phone}}</text>
						</view>
					</view>
				</view>
				<view class="set" @click="seeting">
					<view class="set-ig">
						<image src="../../static/images/set.png" mode=""></image>
						<text>设置</text>
					</view>
				</view>
				<view class="my-bottom">
					<view class="ulst">
						<view class="list" v-for="(item,index) in modules" @click="urli(item)">
							<view class="quantity">
								<text class="font-in">{{ tokenStatus ? item.ber : '0' }}</text>
								<text class="font-zi">{{item.id == 3 ? '条' : '个'}}</text>
							</view>
							<text class="annotation">{{item.ser}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="center-vip" @click="vip" >
			<view class="vip">
				<view class="vip-s">
					<image src="/static/images/invite-vip.png" mode=""></image>
				</view>
				<view class="font-you">
					<text>优惠有限 限时抢购</text>
				</view>
			</view>
			<view class="pring">
				<image src="../../static/images/yaoqing.png"></image>
			</view>
		</view>
		<Bottom></Bottom>
		<Logout></Logout>
	</view>
</template>


<script>
	import Bottom from "../../components/my/bottom.vue"
	import Logout from "../../components/my/logout.vue"
	export default {
		data() {
			return {
				modules: [{
					id: 1,
					ber: '4',
					ser: '索引'
				}, {
					id: 2,
					ber: '3',
					ser: '添加'
				}, {
					id: 3,
					ber: '2',
					ser: '推广'
				}, {
					id: 4,
					ber: '1',
					ser: '粉丝'
				}],
				index: [{
					inden: '15487',
					phone: '1566551454'
				}],
				tokenStatus: ''
			}
		},
		onLoad() {
			this.tokenStatus = this.$store.state.tokenStatus
		},
		methods: {
			urli(val) {
				let url;
				switch (val.id) {
					case 4:
						url = '/pages/my/fanslist';
						break;
				}
				uni.navigateTo({
					url: url,
				});
			},

			vip() {
				uni.navigateTo({
					url: '/pages/my/vip'
				});
			},
			seeting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				});
			},
		},
		components: {
			Bottom,
			Logout
		}
	}
</script>

<style lang="less" scoped>
	.my {
		.my-top {
			.my-top-ul {
				margin: 0 auto;
				width: 732rpx;
				height: 432rpx;
				background-image: url(../../static/images/beijing.png) ;
                background-repeat:no-repeat;
				background-size:732rpx 432rpx;
				position: relative;
				.index-use {
					display: flex;
					.my-img {
						image {
							width: 122rpx;
							height: 122rpx;
							margin: 60rpx 0 0 60rpx;
						}
					}

					.my-use {
						margin: 65rpx 0 0 10rpx;

						.my-use-li {
							display: flex;

							.my-use-name {
								font-size: 34rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FFFFFF;
							}

							.my-use-id {
								margin-left: 30rpx;
								line-height: 50rpx;
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
							}
						}

						.my-use-lo {
							margin-top: 10rpx;
							width: 250rpx;
							height: 35rpx;
							border: 1px solid #E3E3E3;
							border-radius: 18px;
							display: flex;
							align-items: center;

							image {
								width: 14rpx;
								height: 22rpx;
								margin: 6rpx 20rpx;
							}

							text {
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
							}
						}
					}
				}

				.set {
					position: absolute;
					top: 30rpx;
					right: 20rpx;
					width: 154rpx;
					height: 63rpx;
					background-image: url(/static/images/setback.png);
					background-size: 154rpx 63rpx;
					.set-ig{
						position: relative;
						width: 100%;
						height: 100%;
						justify-content: center;
						/* line-height: 100%; */
						display: flex;
						align-items: center;
						image{
							width: 30rpx;
						    height: 30rpx;	
						}
					    text{
							margin-left: 10rpx;
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #BB8800;
							line-height: 35rpx;
						}
					}
				}
				.my-bottom{
					width: 90%;
					margin: 0 auto;
					margin-top: 60rpx;
					.ulst{
						display: flex;
						justify-content: space-around;
						text-align: center;
						.list{
							width: 20%;
						  white-space:nowrap;
							.quantity{
								// width: 100%;
								.font-in{
									width: 30rpx;
									font-size: 40rpx;
									font-family: Source Han Sans CN;
									font-weight: 500;
									color: #FFFFFF;
									overflow:hidden;
									text-overflow:ellipsis;
									-o-text-overflow:ellipsis;
									-webkit-text-overflow:ellipsis;
									-moz-text-overflow:ellipsis;
									white-space:nowrap;
								}
								.font-zi{
									font-size: 20rpx;
									font-family: Source Han Sans CN;
									font-weight: 500;
									color: #FFFFFF;
								}
							}
							.annotation{
								font-size: 24rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #B3DAFF;
								opacity: 0.6;
							}
						}
					}
				}
			}
		}
		.center-vip{
			border-top: 10rpx solid #EEEEEE;
			border-bottom:10rpx solid #EEEEEE ;
			width: 750rpx;
			height: 157rpx;
			display: flex;
			-webkit-justify-content: space-around;
			.vip{
				padding-top: 30rpx;
				.vip-s{
					image{
						width: 353rpx;
					    height: 45rpx;
					}
				}
				.font-you{
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #C1C0C9;
				}
			}
			.pring{
				image{
					width: 245rpx;
					height: 148rpx;
				}
			}
		}
	}
</style>
